<template>
  <div class="message-center">
    <div class="module-title">
      <div class="title-left">消息通知</div>
      <div class="title-right" @click="goMorepage">
        更多
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="module-con" v-if="noticList.length">
      <div
        class="con-item"
        :class="{ readed: true }"
        v-for="item in noticList"
        :key="item.id"
        @click="goNoticDetail(item)">
        <div class="item-left">
          <div class="item-tag">{{ item.busSign }}</div>
          <div class="item-title" :title="item.noticeName">{{ item.noticeName }}</div>
        </div>
        <div class="item-right">{{ item.createTime }}</div>
      </div>
    </div>
    <Empty v-else class="empty-box"></Empty>
  </div>
</template>

<script>
import Empty from '@com/Empty.vue'
import { listNotices, updateNoticeRead } from '@apis/message.js'
export default {
  name: 'MessageCenter',
  components: {
    Empty,
  },
  emits: [],
  props: {},
  data() {
    return {
      noticList: [],
      noticTotalPages: 0,
      noticPage: 1,
      noticPageSize: 5,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getListNotices()
  },
  methods: {
    // 获取未读消息列表
    getListNotices() {
      listNotices({
        current: this.noticPage,
        size: this.noticPageSize,
        status: '0',
      }).then(res => {
        this.noticList = res.data.records || []
        this.noticTotalPages = res.data.total
      })
    },
    goNoticDetail(item) {
      if (item.isRead === '0') {
        updateNoticeRead({
          id: item.id,
        }).then(res => {
          // this.$router.push(item.url)
          this.routePage(item)
        })
      } else {
        // this.$router.push(item.url)
        this.routePage(item)
      }
    },
    goMorepage() {
      this.$router.push({
        path: '/system/message',
      })
    },
    routePage(item) {
      const urlArr = item.url.split('?')
      const str = urlArr[0]
      if (str === 'boarddetail') {
        const urlStr = item.url.replace(str, '/document/index-detail') + '&isEnd=true'
        this.$router.push(urlStr)
      } else if (str === 'evaluate') {
        const urlStr = item.url.replace(str, '/evaluate/edit') + '&isEnd=true'
        this.$router.push(urlStr)
      } else if (str === 'attendanceCheck') {
        const urlStr = item.url.replace(str, '/attendance/check') + '&isEnd=true'
        this.$router.push(urlStr)
      } else if (str === 'evaluationManageSum') {
        const urlStr = item.url.replace(str, '/minzhu/assess') + '&isEnd=true'
        this.$router.push(urlStr)
      } else if (str === 'evaluationManage') {
        const urlStr = item.url.replace(str, '/minzhu/create') + '&isEnd=true'
        this.$router.push(urlStr)
      } else if (str === 'GradeManagement') {
        const urlStr = item.url.replace(str, '/grade-manage')
        this.$router.push(urlStr)
      } else {
        this.$router.push({
          path: item.url,
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.message-center {
  height: 100%;
  .module-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #b5b5b5;
    padding-bottom: 8px;
    .title-left {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
    }
    .title-right {
      font-size: 14px;
      cursor: pointer;
    }
  }
  .module-con {
    margin-top: 7px;
    height: calc(100% - 45px);
    overflow-y: auto;
    .con-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #dddddd;
      line-height: 24px;
      font-size: 14px;
      padding: 5px 0;
      padding-left: 15px;
      position: relative;
      cursor: pointer;
      &::before {
        width: 5px;
        height: 5px;
        content: '';
        background: #f02525;
        border-radius: 50%;
        position: absolute;
        left: 5px;
      }
      &.readed {
        &::before {
          background: transparent;
        }
      }
      span {
        color: #0060c4;
      }
      .item-left {
        flex: 1;
        display: flex;
        align-items: center;
        overflow: hidden;
        .item-tag {
          padding-right: 5px;
          margin-right: 5px;
          border-right: 1px solid #dddddd;
        }
        .item-title {
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .item-right {
        color: #777777;
        margin-left: 5px;
        min-width: 80px;
        text-align: right;
      }
    }
  }
  .empty-box {
    height: calc(100% - 40px);
  }
}
</style>
